<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index2.css">
    <style>
        #calculator {
        width: 260px;
        height: 360px;
        margin: 30px auto;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: aliceblue;
    }
    #display {
        width: 95%;
        height: 50px;
        margin-bottom: 10px;
        border-radius: 20px;
        font-size: 18px;
        text-align: right;
        background-color: powderblue;
        color: black;
    }
    .buttons {
        width: 260px;
        height: 302px;
    }
    .buttons button {
        width: 50px;
        height: 50px;
        font-size: 18px;
        margin: 5px;
        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        text-align: center;
        background-color: white;
    }
    #w2 {
        margin-right: 11px;
        float: right;
        width: 50px;
        height: 110px;
        background-color: blue;
        border-radius: 30px;
        color: white;
    }
    #w3 {
        width: 114px;
        height: 50px;
        border-radius: 30px;
    }
    .c2 {
        color: blue;
        font-weight: bold;
    }
    .buttons button:hover {
        transform: scale(1.1);
    }
    .buttons button:active {
        transform: scale(1);
    }
      </style>
</head>
<body>
    <div class="top-nav">
        <ul>
            <li><a href="./js任务二.html">首页</a></li>
            <li><a href="./时钟.html">时钟</a></li>
            <li><a href="https://gitee.com/zxzdkj/web-homework.git">代码仓库</a></li>
        </ul>
    </div>
    <div id="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button class="c2" onclick="clearDisplay()">C</button>
            <button class="c2" onclick="appendDisplay('/')">/</button>
            <button class="c2" onclick="appendDisplay('*')">*</button>
            <button class="c2" onclick="backspace()">⌫</button>
            <button onclick="appendDisplay('1')">1</button>
            <button onclick="appendDisplay('2')">2</button>
            <button onclick="appendDisplay('3')">3</button>
            <button class="c2" onclick="appendDisplay('+')">+</button>
            <button onclick="appendDisplay('4')">4</button>
            <button onclick="appendDisplay('5')">5</button>
            <button onclick="appendDisplay('6')">6</button>
            <button class="c2" onclick="appendDisplay('-')">-</button>
            <button onclick="appendDisplay('7')">7</button>
            <button onclick="appendDisplay('8')">8</button>
            <button onclick="appendDisplay('9')">9</button>
            <button id="w2" onclick="calculate()">=</button> 
            <button id="w3" onclick="appendDisplay('0')">0</button>
            <button onclick="appendDisplay('.')">.</button>
        </div>
    </div>
    <script>
        let currentInput = ''
        let operand = false
        function appendDisplay(value) {
            if(value === 'C') {
                clearDisplay()
                return
            }
            if(['+','-','*','/'].includes(value)){
                if(currentInput && !['+','-','*','/'].includes(currentInput[currentInput.length-1])){
                    currentInput+=value
                }
                else if(!currentInput){
                    currentInput=value
                }
                operand = true
            } else if(value === '.'){
                if(!currentInput.includes('.')){
                    currentInput+=value
                }
            } else{
                currentInput+=value
            }
            document.getElementById('display').value=currentInput
        }
        function clearDisplay(){
            currentInput = ''
            operand = false
            document.getElementById('display').value = currentInput
        }
        function backspace(){
            if(currentInput.length>0){
                currentInput = currentInput.slice(0,-1)
                document.getElementById('display').value = currentInput
            }
        }
        function calculate(){
            if(currentInput !== ''){
                if (!/^\s*(-?\d+(\.\d+)?(\s*[\+\-\*\/]\s*-?\d+(\.\d+)?)*\s*)+$/.test(currentInput)){
                    showError('输入格式有误')
                    return
                }
                try {
                    let result = new Function('return ' + currentInput)()
                    currentInput = result.toString()
                    document.getElementById('display').value = currentInput
                    operand = true
                } catch (error) {
                    showError('输入有误')
                }
            }
        }
        function showError(message){
            let display = document.getElementById('dispaly')
            display.value = message
            setInterval(()=>{
                clearDisplay()
            },2000)
        }
    </script>
</body>
</html>